<script>
import { GlAlert, GlLink, GlModal, GlSprintf } from '@gitlab/ui';
import Tracking from '~/tracking';
import { sprintf } from '~/locale';
import { joinPaths } from '~/lib/utils/url_utility';
import { parseBoolean, getCookie, setCookie } from '~/lib/utils/common_utils';
import VulnerabilityReport from '../shared/vulnerability_report/vulnerability_report.vue';
import {
  FIELD_PRESETS,
  FILTER_PRESETS,
  REPORT_TYPE_PRESETS,
} from '../shared/vulnerability_report/constants';
import projectVulnerabilitiesQuery from '../../graphql/queries/project_vulnerabilities.query.graphql';
import { DASHBOARD_TYPES } from '../../store/constants';
import {
  ALERT_COOKIE_KEY,
  ALERT_MESSAGE,
  ALERT_TITLE,
  MODAL_ACTIONS,
  MODAL_MESSAGE,
  MODAL_TITLE,
  trackAgentSecurityTabAlert,
  VULNERABILITY_REPORT_OPERATIONAL_TAB_LINK_LOCATION,
} from './constants';

export default {
  components: {
    GlAlert,
    GlLink,
    GlModal,
    GlSprintf,
    VulnerabilityReport,
  },
  /**
   * Normally we should only use provide when bootstrapping an application, but this is an exception
   * because there is a CE/EE split in `app/assets/javascripts/clusters/agents/index.js` (where
   * these values are only needed for EE) and there is necessary rename/variable naming that only
   * makes sense in the context of being in the `app/assets/javascripts/security_dashboard`
   * directory.
   */
  provide() {
    return {
      dashboardType: DASHBOARD_TYPES.PROJECT,
      fullPath: this.projectPath,
      canViewFalsePositive: false,
      hasJiraVulnerabilitiesIntegrationEnabled: false,
      vulnerabilitiesQuery: projectVulnerabilitiesQuery,
    };
  },
  inject: ['agentName', 'projectPath'],
  props: {
    clusterAgentId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      alertDismissed: parseBoolean(getCookie(ALERT_COOKIE_KEY)),
      graphqlFilters: { clusterAgentId: [this.clusterAgentId] },
    };
  },
  computed: {
    alertTitleComputed() {
      return sprintf(ALERT_TITLE, { agent: this.agentName });
    },
    operationalVulnerabilitiesHref() {
      return joinPaths(
        gon.relative_url_root || '/',
        this.projectPath,
        VULNERABILITY_REPORT_OPERATIONAL_TAB_LINK_LOCATION,
      );
    },
  },
  methods: {
    handleAlertDismiss() {
      this.$refs.modal.show();
    },
    handleModalPrimary() {
      setCookie(ALERT_COOKIE_KEY, 'true');
      this.alertDismissed = true;

      const { category, action } = trackAgentSecurityTabAlert;
      Tracking.event(category, action);
    },
    transformFilters(filters) {
      return {
        ...filters,
        reportType: REPORT_TYPE_PRESETS.OPERATIONAL,
        clusterAgentId: [this.clusterAgentId],
      };
    },
  },
  fieldsToShow: FIELD_PRESETS.AGENT,
  filtersToShow: FILTER_PRESETS.AGENT,
  i18n: { ALERT_MESSAGE, MODAL_MESSAGE, MODAL_TITLE },
  MODAL_ACTIONS,
};
</script>

<template>
  <div>
    <gl-alert
      v-if="!alertDismissed"
      variant="info"
      class="gl-mb-3"
      :title="alertTitleComputed"
      @dismiss="handleAlertDismiss"
    >
      <gl-sprintf :message="$options.i18n.ALERT_MESSAGE">
        <template #agent>
          <p class="gl-display-inline">{{ agentName }}</p>
        </template>
        <template #link="{ content }">
          <gl-link :href="operationalVulnerabilitiesHref">{{ content }}</gl-link>
        </template>
      </gl-sprintf>
    </gl-alert>

    <vulnerability-report
      :fields="$options.fieldsToShow"
      :filter-dropdowns="$options.filtersToShow"
      :filter-fn="transformFilters"
    />

    <gl-modal
      ref="modal"
      modal-id="agent-vulnerabilities-modal"
      size="sm"
      :action-primary="$options.MODAL_ACTIONS.primary"
      :action-secondary="$options.MODAL_ACTIONS.secondary"
      :title="$options.i18n.MODAL_TITLE"
      @primary="handleModalPrimary"
    >
      {{ $options.i18n.MODAL_MESSAGE }}
    </gl-modal>
  </div>
</template>
